<template>
<div>
  <el-main>
      <el-row type="flex" justify="center" style="margin-top:60px">
          <el-col :span="16">
              <el-card shadow="always">
                    <el-row type="flex" justify="center"><h1>预测分析系统</h1></el-row>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="人口增长率">
                                <el-input v-model="growthRatePopulation" placeholder="请输入内容" name="growthRatePopulation"></el-input>
                                <el-slider v-model="growthRatePopulation" :min="0.001" :max="0.005" :step="0.0001"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="充电便捷度">
                                <el-input v-model="chargingConvenience" placeholder="请输入内容" name="chargingConvenience"></el-input>
                                <el-slider v-model="chargingConvenience" :min="0.1" :max="1.0" :step="0.01"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="价格因子">
                                <el-input v-model="priceFactor" placeholder="请输入内容" name="priceFactor"></el-input>
                                <el-slider v-model="priceFactor" :min="0.05" :max="0.15" :step="0.001"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="CV保有量">
                                <el-input v-model="cvInventory" placeholder="请输入内容" name="cvInventory"></el-input>
                                <el-slider v-model="cvInventory" :min="0.5" :max="15" :step="0.1"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="人口（万人）">
                                <el-input v-model="population" placeholder="请输入内容" name="population"></el-input>
                                <el-slider v-model="population" :min="63" :max="100" :step="0.1"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="购买因子">
                                <el-input v-model="buyFactor" placeholder="请输入内容" name="buyFactor"></el-input>
                                <el-slider v-model="buyFactor" :min="0.01" :max="0.20" :step="0.01"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="充电电价（元/度）">
                                <el-input v-model="electrovalence" placeholder="请输入内容" name="electrovalence"></el-input>
                                <el-slider v-model="electrovalence" :min="0.5" :max="1.0" :step="0.01"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-form style="margin:auto 100px">
                            <el-form-item label="EV保有量">
                                <el-input v-model="evInventory" placeholder="请输入内容" name="evInventory"></el-input>
                                <el-slider v-model="evInventory" :min="5" :max="15" :step="0.1"></el-slider>
                            </el-form-item>
                    </el-form>
                    <el-row type="flex" justify="center">  
                        <el-button round @click="toResult">点击提交</el-button>
                    </el-row>
              </el-card>
          </el-col>
      </el-row>
  </el-main>
</div>
</template>

<script>
export default {
    data(){
        return{
            growthRatePopulation:0.002,
            chargingConvenience:0.5,
            priceFactor:0.10,
            cvInventory:10,
            population:70,
            buyFactor:0.1,
            electrovalence:0.7,
            evInventory:10,
        }
    },
    methods:{
        toResult(){
            let post_data = {
                'convenient effect': this.chargingConvenience,
                'price effect': this.priceFactor,
                'sale effect': this.buyFactor,
                'population': this.population,
                'population growth rate': this.growthRatePopulation,
                'Charge price': this.electrovalence,
                'CV parc': this.cvInventory,
                'EV parc': this.evInventory,                
            };
            this.$router.push({path:'/result',query:{post_data:post_data}});
        }
    },
    computed:{

    }
}
</script>

<style scoped>
.el-form-item__label{
    font-size: 20px;
}
.el-button{
    font-size: 24px;
}


</style>
